<template>
	<view class="page">
		<uni-nav-bar background-color="#00a9ff" title="问卷目录" color="white" :fixed="true"
		  statusBar="true" left-icon="left" @clickLeft="back"/>
		<!-- 章节项目 -->
		<view v-for="item in categories" :key="item.id" class="category_wrapper_item" @tap="handleQuestion(item)">
			<!-- 左侧图片 -->
			<view class="category_wrapper_item_img">

			</view>
			<!-- 右侧项目内容 -->
			<view class="category_wrapper_item_content">
				<view class="category_wrapper_item_content_title">
					{{item.name}}
				</view>
				<view class="category_wrapper_item_content_sub">
					{{item.counts}}题 | 
					注意事项：{{item.difficulty}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import {
        loadCategories
    } from "../../service/api.js";
    // 类别列表
    export default {
        data() {
            return {
                // 题目类别数组
                categories: []
            }
        },
        // 页面挂载完成后，获取类别数据
        mounted() {
            loadCategories().then(data => {
                this.categories = data; // 将返回的数据赋值给 categories 数组
            }).catch(error => {
                console.error('Failed to load categories:', error);
            });
        },
        methods: {
            // 点击类别进入对应的答题页面，需要将点击的类别id传入过去。
            handleQuestion(item) {
                const categoryId = item.id;
                uni.navigateTo({
                    url: `/pages/questions/questions?categoryId=${categoryId}`,
                });
            },
			back(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
				//uni.navigateBack()
			}
        }
    }
</script>


<style>
/* 	.category_wrapper {
		background: #0000000d;
		min-height: 100vh;
		padding: 30rpx;
	} */

	.category_wrapper_item {
		background: white;
		padding: 30rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.category_wrapper_item_img {
		width: 100rpx;
		height: 100rpx;
		background-image: url('../../static/icon.svg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.category_wrapper_item_content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30rpx;
	}

	.category_wrapper_item_content_title {
		font-weight: bold;
		color: #000000d4;
		flex: 1;
	}

	.category_wrapper_item_content_sub {
		font-size: 24rpx;
		color: #0000008f;
		margin-top: 14rpx;
	}
</style>